<template>
  <div class="page">
    <van-nav-bar title="登录" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        name="phone"
        label="手机号"
        placeholder="手机号"
        maxlength="11"
        left-icon="contact"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        maxlength="6"
        placeholder="密码长度6位"
        left-icon="closed-eye"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-button round block type="info" native-type="submit">登录</van-button>
    </van-form>
  </div>
</template>
<script>
export default {
  name: 'LoginView',
  data () {
    return {
      phone: '',
      password: ''
    }
  },
  methods: {
    onSubmit (values) {
      this.$router.replace('workbench')
      console.log('submit', values)
    }
  }
}
</script>
<style lang="less" scoped>
.page {
  width: 100vw;
  height: 100vh;
  background-color: #ff6633;
}
.van-form {
  margin: 45% 24px 0 24px;
  .van-button{
    margin-top: 1.25rem;
  }
}
</style>
